<template>
  <Loading :show="isLoadingPromotions" />
  
  <view class="header">
    <image
      class="logo-image"
      src="/static/logo/logo2-02.png"
      mode="scaleToFill"
    />
    <view class="header-right">
      <input
        class="search-input"
        type="text"
        v-model="searchQuery"
        placeholder="搜索商品"
        @confirm="handleSearch"
      />
      <image class="scan-icon" src="/static/search.png" @click="scanCode" />
    </view>
  </view>

  <scroll-view scroll-y class="content">
    <!-- 轮播图 - 不受骨架屏影响，始终显示 -->
    <swiper
      v-if="swiperList.length > 0"
      class="swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="item.id">
        <image class="swiper-image" :src="item.src" @click="handleSwiperClick(item)" />
      </swiper-item>
    </swiper>

    <!-- 优惠活动 - 不受骨架屏影响，始终显示 -->
    <view v-if="promotions.length > 0" class="promotion-section">
      <view class="section-title">
        <text class="title-text">限时优惠</text>
        <text class="more-text" @click="navigateToPromotions">更多 ></text>
      </view>
      <scroll-view scroll-x class="promotion-scroll">
        <view 
          class="promotion-item" 
          v-for="promo in promotions" 
          :key="promo.id"
          @click="navigateToProductDetail(promo)"
        >
          <image class="promotion-image" :src="promo.image" mode="aspectFill" />
          <view class="promotion-info">
            <text class="promotion-title">{{ promo.title }}</text>
            <text class="promotion-price">¥{{ promo.price }}</text>
            <text class="promotion-original-price">¥{{ promo.originalPrice }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 骨架屏 - 移到限时优惠下面 -->
    <Skeleton :show="showSkeleton" />

    <!-- 商品推荐 - 需要骨架屏 -->
    <view v-if="!showSkeleton && recommendProducts.length > 0" class="recommend-section">
      <view class="section-title">
        <text class="title-text">商品推荐</text>
        <text class="more-text" @click="navigateToRecommend">更多 ></text>
      </view>
      <view class="recommend-grid">
        <view 
          class="recommend-item" 
          v-for="product in recommendProducts" 
          :key="product.id"
          @click="navigateToProductDetail(product)"
        >
          <image class="product-image" :src="product.image" mode="aspectFill" />
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <text class="product-price">¥{{ product.price }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- AI推荐 - 需要骨架屏 -->
    <view v-if="!showSkeleton" class="ai-recommend-section">
      <view class="section-title">
        <text class="title-text">AI智能推荐</text>
        <text class="more-text" @click="navigateToAIRecommend">更多 ></text>
      </view>
      <view class="ai-recommend-content">
        <view v-if="!aiRecommendProducts.length" class="ai-recommend-empty">
          <view class="ai-recommend-card">
            <view class="ai-recommend-header">
              <image class="ai-icon" src="/static/ai-icon.png" mode="aspectFit" />
              <text class="ai-title">智能推荐</text>
            </view>
            <view class="ai-recommend-body">
              <text class="ai-description">基于当前天气和您的喜好，为您推荐最适合的饮品</text>
              <button 
                class="get-recommend-btn" 
                :loading="isLoadingAIRecommend"
                :disabled="isLoadingAIRecommend"
                @click="fetchAIRecommendProducts"
              >
                {{ isLoadingAIRecommend ? '正在推荐...' : '获取推荐' }}
              </button>
            </view>
          </view>
        </view>
        <view v-else>
          <view v-if="aiReason" class="ai-recommend-reason">
            <image class="ai-reason-icon" src="/static/ai-reason.png" mode="aspectFit" />
            <text class="ai-reason-text">{{ aiReason }}</text>
          </view>
          <view class="ai-recommend-grid">
            <view 
              class="ai-recommend-item" 
              v-for="product in aiRecommendProducts" 
              :key="product.name"
              @click="navigateToProductDetail(product)"
            >
              <image class="product-image" :src="product.image" mode="aspectFill" />
              <view class="product-info">
                <text class="product-name">{{ product.name }}</text>
                <text class="product-reason">{{ product.aiReason }}</text>
                <text class="product-price">¥{{ product.price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 广告图片区块 - 需要骨架屏 -->
    <view v-if="!showSkeleton" class="ad-card">
      <view class="ad-title">广告</view>
      <scroll-view scroll-x class="ad-scroll">
        <view class="ad-item" v-for="(ad, idx) in adImages" :key="ad.img" @click="handleAdClick(idx)">
          <image :src="ad.img" class="ad-image" mode="aspectFill" />
        </view>
      </scroll-view>
    </view>
    <!-- END 广告图片区块 -->
    <view class="footer">
      <text>© 2024 星售站 版权所有 | 蜀ICP备xxxxxxx号</text>
    </view>
  </scroll-view>

  <!-- 自定义选择对话框 -->
  <view v-if="showScanDialog" class="scan-dialog">
    <view class="dialog-mask" @click="closeScanDialog"></view>
    <view class="dialog-content">
      <view class="dialog-header">
        <text class="dialog-title">选择操作</text>
        <view class="close-btn" @click="closeScanDialog">×</view>
      </view>
      <view class="dialog-body">
        <text class="dialog-message">是否使用上次扫描的设备？</text>
      </view>
      <view class="dialog-footer">
        <button class="dialog-btn confirm" @click="useLastDevice">使用上次</button>
        <button class="dialog-btn scan" @click="startNewScan">重新扫描</button>
        <button class="dialog-btn cancel" @click="closeScanDialog">取消</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onShow } from '@dcloudio/uni-app';
import Loading from '@/components/Loading.vue';
import Skeleton from '@/components/Skeleton.vue';
import { getProductList } from '@/api/product';
import { recommendDrinks } from '@/api/ai';
import { getLocationByIp, getIp, regeocode } from '@/api/map';

interface AIRecommendProduct {
  id?: number;
  name: string;
  price: number;
  image: string;
  reason: string;
}

const searchQuery = ref("");
const isLoadingPromotions = ref(false);
const isLoadingAIRecommend = ref(false);
const lastScanDevice = ref(null);
const enableScanHistory = ref(true);
const aiReason = ref("");
const showSkeleton = ref(true);

// 轮播图数据
const swiperList = ref([
  { id: 1, src: "/static/Advertisement/binghongcha.jpeg" },
  { id: 2, src: "/static/Advertisement/maidong.jpeg" },
  { id: 3, src: "/static/Advertisement/fenda.jpeg" },
]);

// 优惠活动数据
const promotions = ref([]);

// 推荐商品数据
const recommendProducts = ref([]);

// AI推荐商品数据
const aiRecommendProducts = ref<AIRecommendProduct[]>([]);

// 广告图片数据
const adImages = [
  { img: '/static/gg_qingniao.jpeg', url: 'http://www.0735jb.cn/?bd_vid=4372104396338186125' }, // 你可以填写链接
  { img: '/static/df21c3aebe9f02f9e3cc4b5a04b9761.jpg', url: '' },
  { img: '/static/aaf99fb62d97f91323483ccccaf87b0.jpg', url: '' },
  { img: '/static/9062bf444d030e719b032b72cc5a4fe.jpg', url: '' },
  { img: '/static/ec93919775d5e08aa4893fd549f1d0e.jpg', url: '' },
];

// 天气相关数据
const weatherInfo = ref({
  temperature: 0,
  humidity: 0,
  windSpeed: '',
  windDirection: '',
  city: ''
});

// 添加所有商品数据的存储
const allProducts = ref([]);

// 添加对话框相关的状态和方法
const showScanDialog = ref(false);

const loadData = async () => {
  try {
    // 1. 优先获取限时优惠数据，使用Loading
    isLoadingPromotions.value = true;
    
    const promotionRes = await getProductList({
      pageNum: 1,
      pageSize: 3,
      isPromotion: 1
    });
    if (promotionRes && promotionRes.rows) {
      promotions.value = promotionRes.rows.map(item => ({
        id: item.id,
        title: item.name,
        price: item.price,
        originalPrice: item.originalPrice || item.price * 1.2,
        image: item.productDetail?.mainImage
      }));
    }
    
    // 2. 限时优惠获取完成，隐藏Loading
    isLoadingPromotions.value = false;
    
    // // 3. 获取轮播图数据（不受骨架屏影响）
    // const swiperRes = await getProductList({
    //   pageNum: 1,
    //   pageSize: 3,
    //   isRecommend: 1
    // });
    // if (swiperRes && swiperRes.rows) {
    //   swiperList.value = swiperRes.rows.map(item => ({
    //     id: item.id,
    //     src: item.productDetail?.mainImage
    //   }));
    // }
    
    // 4. 显示骨架屏，开始获取其他需要骨架屏的数据
    showSkeleton.value = true;
    
    // 5. 获取推荐商品数据
    const recommendRes = await getProductList({
      pageNum: 1,
      pageSize: 4,
      isRecommend: 1
    });
    if (recommendRes && recommendRes.rows) {
      recommendProducts.value = recommendRes.rows.map(item => ({
        id: item.id,
        name: item.name,
        price: item.price,
        image: item.productDetail?.mainImage
      }));
    }
    
    // 6. 隐藏骨架屏，显示主要内容
    showSkeleton.value = false;
    
    // 7. 异步获取所有商品数据（用于AI推荐）
    getProductList({
      pageNum: 1,
      pageSize: 100
    }).then(allProductsRes => {
      if (allProductsRes && allProductsRes.rows) {
        allProducts.value = allProductsRes.rows.map(item => ({
          id: item.id,
          name: item.name,
          price: item.price,
          image: item.productDetail?.mainImage
        }));
      }
    }).catch(error => {
      // 异步获取失败，不影响主要功能
    });
    
  } catch (error) {
    showSkeleton.value = false;
    isLoadingPromotions.value = false;
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  }
};

// 跳转到分类
const handleSearch = () => {
	uni.setStorageSync('searchContent', searchQuery.value);
	searchQuery.value = "";
	uni.switchTab({
	  url: '/pages/products/index',
	});
};

// 读取上次扫描记录
const loadLastScanDevice = () => {
  try {
    const lastDevice = uni.getStorageSync('lastScanDevice');
    if (lastDevice) {
      lastScanDevice.value = lastDevice;
    }
  } catch (error) {
    // 读取失败，忽略
  }
};

// 保存扫描记录
const saveLastScanDevice = (deviceNo: string) => {
  if (!enableScanHistory.value) return;
  
  try {
    uni.setStorageSync('lastScanDevice', deviceNo);
    lastScanDevice.value = deviceNo;
  } catch (error) {
    // 保存失败，忽略
  }
};

// 获取城市信息
const getCityByIP = async () => {
  try {
    // 1. 获取IP定位
    const locationRes = await getLocationByIp();
    // 3. 获取天气信息
    await getWeatherInfo(locationRes.data.city);
    
  } catch (error) {
    // 获取城市信息失败，不影响主要功能
  }
};

// 获取天气信息
const getWeatherInfo = async (city: string) => {
  try {
    const res = await uni.request({
      url: 'https://restapi.amap.com/v3/weather/weatherInfo',
      data: {
        key: '5eddce1fc9c1e374d033c90895a9c907',
        city: city,
        extensions: 'base'
      }
    });
    
    if (res.statusCode === 200 && res.data && res.data.status === '1' && res.data.lives && res.data.lives[0]) {
      const weather = res.data.lives[0];
      weatherInfo.value = {
        ...weatherInfo.value,
        temperature: parseFloat(weather.temperature),
        humidity: parseFloat(weather.humidity),
        windSpeed: weather.windpower,
        windDirection: weather.winddirection,
        weather: weather.weather,
        reportTime: weather.reporttime
      };
      // 获取到天气信息后，调用AI推荐
      // fetchAIRecommendProducts();
    } else {
      console.error('天气数据格式错误：', res.data);
    }
  } catch (error) {
    console.error('获取天气信息失败：', error);
  }
};

// 获取AI推荐商品
const fetchAIRecommendProducts = async () => {
  if (isLoadingAIRecommend.value) return;
  
  isLoadingAIRecommend.value = true;
  
  try {
    const res = await recommendDrinks({
      humidity: weatherInfo.value.humidity,
      windDirection: weatherInfo.value.windDirection,
      weather: weatherInfo.value.weather,
      windSpeed: weatherInfo.value.windSpeed,
      temperature: weatherInfo.value.temperature,
      city: weatherInfo.value.city,
      products: allProducts.value
    });
    
    if (res && res.code === 200 && res.data) {
      // console.log(allProducts.value)
      // 从allProducts中查找完整的商品信息
      const fullProducts = res.data.recommendations.map(recommendation => {
        const fullProduct = allProducts.value.find(p => p.id == recommendation.id);
        return {
          ...fullProduct,
          aiReason: recommendation.reason // 保留AI推荐的原因
        };
      });
      // console.log(fullProducts)
      aiRecommendProducts.value = fullProducts;
      aiReason.value = res.data.reason;
    }
  } catch (error) {
    uni.showToast({
      title: "获取推荐失败",
      icon: "none"
    });
  } finally {
    isLoadingAIRecommend.value = false;
  }
};

// 页面显示时检查设置
onShow(() => {
  // 从本地存储加载设置
  const savedSettings = uni.getStorageSync('settings');
  if (savedSettings) {
    enableScanHistory.value = savedSettings.enableScanHistory ?? true;
  }
});

// 页面加载时获取数据
onMounted(() => {
  console.log('首页组件挂载');
  // 确保初始状态正确
  isLoadingPromotions.value = false; // 初始不显示Loading
  showSkeleton.value = true; // 初始显示骨架屏
  
  // 加载主要数据
  loadData();
  
  // 并行加载其他初始化数据
  Promise.all([
    loadLastScanDevice(),
    getCityByIP()
  ]).catch(error => {
    // 初始化数据加载失败，不影响主要功能
  });
});


// 扫码功能
const scanCode = () => {
  // 如果启用了扫描记录且有上次扫描记录，显示选择对话框
  if (enableScanHistory.value && lastScanDevice.value) {
    showScanDialog.value = true;
  } else {
    // 直接开始扫描
    startScan();
  }
};

// 开始扫描
const startScan = () => {
  uni.scanCode({
    scanType: ['qrCode', 'barCode'],
    success: function (res) {
      // 处理扫码结果
      handleScanResult(res.result);
    },
    fail: function (err) {
      // 用户取消扫描时不显示错误提示
      if (err.errMsg !== 'scanCode:fail cancel') {
        uni.showToast({
          title: "扫码失败",
          icon: "error"
        });
      }
    },
  });
};

const handleScanResult = (result: string) => {
  // 尝试解析扫码结果
  let deviceNo = result;
  
  // 如果是URL编码的，先解码
  try {
    deviceNo = decodeURIComponent(result);
  } catch (error) {
    // 解码失败，使用原始结果
  }
  
  // 如果结果包含等号，可能是 key=value 格式，提取value部分
  if (deviceNo.includes('=')) {
    const parts = deviceNo.split('=');
    if (parts.length >= 2) {
      deviceNo = parts[1];
    }
  }
  
  // 假设扫码结果是设备编号，跳转到设备商品页面
  if (deviceNo && deviceNo.trim()) {
    // 保存扫描记录
    saveLastScanDevice(deviceNo.trim());
    uni.navigateTo({
      url: `/pages/device/products?deviceNo=${encodeURIComponent(deviceNo.trim())}`
    });
  } else {
    uni.showToast({
      title: '无效的二维码',
      icon: 'none'
    });
  }
};

// 轮播图点击
const handleSwiperClick = (item: any) => {
  // 处理轮播图点击事件
};

// 导航到优惠活动页
const navigateToPromotions = () => {
  uni.navigateTo({
    url: '/pages/promotion/index'
  });
};

// 导航到优惠活动详情
const navigateToPromotionDetail = (promo: any) => {
  uni.navigateTo({
    url: `/pages/promotion/detail?id=${promo.id}`
  });
};

// 导航到推荐商品页
const navigateToRecommend = () => {
  uni.switchTab({
    url: '/pages/products/index'
  });
};

// 导航到商品详情
const navigateToProductDetail = (product: any) => {
  uni.navigateTo({
    url: `/pages/product/detail?id=${product.id}`
  });
};

// 导航到门店页
const navigateToStore = () => {
  uni.navigateTo({
    url: '/pages/store/index'
  });
};

// 跳转到AI推荐页面
const navigateToAIRecommend = () => {
  uni.switchTab({
    url: '/pages/products/index?type=ai'
  });
};

const handleAdClick = (idx: number) => {
  const url = adImages[idx].url;
  if (!url) {
    uni.showToast({ title: '暂无跳转链接', icon: 'none' });
    return;
  }
  // #ifdef H5
  if (/^https?:\/\//.test(url)) {
    window.open(url, '_blank');
    return;
  }
  // #endif
  // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU
  if (/^https?:\/\//.test(url)) {
    // 跳转到webview页面
    uni.navigateTo({ url: `/pages/webview/webview?url=${encodeURIComponent(url)}` });
    return;
  } else {
    uni.navigateTo({ url });
    return;
  }
  // #endif
  uni.showToast({ title: '暂不支持此环境跳转', icon: 'none' });
};

// 关闭对话框
const closeScanDialog = () => {
  showScanDialog.value = false;
};

// 使用上次设备
const useLastDevice = () => {
  closeScanDialog();
  uni.navigateTo({
    url: `/pages/device/products?deviceNo=${encodeURIComponent(lastScanDevice.value)}`
  });
};

// 开始新扫描
const startNewScan = () => {
  closeScanDialog();
  startScan();
};
</script>

<style>
/* 调试面板样式 */
.debug-panel {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  border-radius: 8px;
  z-index: 9999;
  font-size: 12px;
}

.debug-panel button {
  background-color: #007aff;
  color: white;
  border: none;
  padding: 5px 10px;
  margin: 2px;
  border-radius: 4px;
  font-size: 12px;
}

.debug-panel text {
  display: block;
  margin-top: 5px;
  font-size: 10px;
}

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ccc;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-left {
  flex: 1;
}

.logo-image {
  width: 44px;
  height: 40px;
}

.header-right {
  display: flex;
  align-items: center;
}

.search-input {
  width: 220px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.scan-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.content {
  margin-top: 70px;
  height: calc(100vh - 70px);
}

.swiper {
  width: 100%;
  height: 200px;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

/* 优惠活动样式 */
.promotion-section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.more-text {
  font-size: 14px;
  color: #666;
}

.promotion-scroll {
  white-space: nowrap;
}

.promotion-item {
  display: inline-block;
  width: 150px;
  margin-right: 10px;
}

.promotion-image {
  width: 150px;
  height: 150px;
  border-radius: 8px;
}

.promotion-info {
  padding: 8px 0;
}

.promotion-title {
  font-size: 14px;
  color: #333;
  display: block;
}

.promotion-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 5px;
}

.promotion-original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

/* 商品推荐样式 */
.recommend-section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.recommend-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 150px;
}

.product-info {
  padding: 8px;
}

.product-name {
  font-size: 14px;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.product-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
}

/* 门店信息样式 */
.store-section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.store-info {
  display: flex;
  align-items: center;
}

.store-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-right: 10px;
}

.store-details {
  flex: 1;
}

.store-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.store-address {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 5px;
}

.store-distance {
  font-size: 12px;
  color: #999;
}

.ad-card {
  margin: 32rpx 0 0 0;
  padding: 0 0 20rpx 0;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.10);
  overflow: hidden;
}
.ad-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1890ff;
  padding: 24rpx 32rpx 10rpx 32rpx;
  letter-spacing: 2rpx;
  background: linear-gradient(90deg, #e6f7ff 0%, #fff 100%);
}
.ad-scroll {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  white-space: nowrap;
  padding: 0 20rpx;
}
.ad-item {
  display: inline-block;
  margin-right: 24rpx;
  border-radius: 14rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  background: #f8f9fa;
  transition: transform 0.2s;
}
.ad-item:last-child {
  margin-right: 0;
}
.ad-item:active {
  transform: scale(0.97);
}
.ad-image {
  width: 320rpx;
  height: 180rpx;
  object-fit: cover;
  display: block;
}
.footer {
  width: 100%;
  text-align: center;
  color: #bbb;
  font-size: 24rpx;
  padding: 40rpx 0 20rpx 0;
  background: transparent;
  letter-spacing: 1rpx;
  user-select: none;
}

.ai-recommend-section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.ai-recommend-content {
  margin-top: 10px;
}

.ai-recommend-card {
  background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ai-recommend-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.ai-icon {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.ai-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.ai-recommend-body {
  text-align: center;
}

.ai-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  display: block;
}

.get-recommend-btn {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
  transition: all 0.3s ease;
}

.get-recommend-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(24, 144, 255, 0.2);
}

.get-recommend-btn[disabled] {
  background: #ccc;
  box-shadow: none;
}

.ai-recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.ai-recommend-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.ai-recommend-item:active {
  transform: scale(0.98);
}

.ai-recommend-item .product-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.ai-recommend-item .product-info {
  padding: 12px;
}

.ai-recommend-item .product-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  display: block;
}

.ai-recommend-item .product-reason {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.ai-recommend-item .product-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
}

.ai-recommend-reason {
  display: flex;
  align-items: flex-start;
  background: linear-gradient(90deg, #e6f7ff 0%, #f0f5ff 100%);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.08);
}
.ai-reason-icon {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}
.ai-reason-text {
  font-size: 15px;
  color: #1890ff;
  line-height: 1.5;
  word-break: break-all;
}

/* 扫描对话框样式 */
.scan-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog-content {
  position: relative;
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  z-index: 1000;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #eee;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  padding: 0 20rpx;
  line-height: 1;
}

.dialog-body {
  padding: 32rpx 24rpx;
}

.dialog-message {
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

.dialog-footer {
  display: flex;
  padding: 24rpx;
  gap: 16rpx;
}

.dialog-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.dialog-btn.cancel {
  background-color: #f5f5f5;
  color: #666;
}

.dialog-btn.confirm {
  background-color: #1890ff;
  color: #fff;
}

.dialog-btn.scan {
  background-color: #52c41a;
  color: #fff;
}
</style>